<template>
  <div class="content">
    <div class="cityaddress_head">
      <p><img src="../../assets/img/address_icon.png">{{ city.cityName }}</p>
    </div>
    <div class="date_select">
      <ul id="listDataS">
        <li v-for="item in dateData" :class="{cur: item === selectDate}" @click="selectDateF(item)">
          <p class="mb5">{{ item.scheduleDay | dayFilter }}</p>
          <p>{{ item.dayWeekStr }}</p>
        </li>
      </ul>
    </div>
    <div class="time_content">
      <p>请选择预约时间</p>
      <div class="time_code">
        <ul>
          <li v-for="item in rangeData" :class="{cur: item === selectRange, pass: item.count == 0}" @click="selectRangeF(item)">
            {{ item.scheduleTime | timeFilter }}
          </li>
        </ul>
      </div>
    </div>
    <div class="btn_group">
      <span>{{ selectRangeTime }}</span>
      <button @click="goToOrder">确定</button>
    </div>
  </div>
</template>

<script>
import indexApi from '@/api/photo/indexApi'
export default {
  name: 'UserSelectData',
  filters: {
    weekFilter(val) {
      if (val) {
        return new Date(val).Format('E')
      } else {
        return ''
      }
    },
    dayFilter(time) {
      if (time) {
        return new Date(time).Format('MM-dd')
      } else {
        return ''
      }
    },
    timeFilter(time) {
      if (time) {
        return new Date(time).Format('hh:mm')
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      dateData: [],
      selectDate: null,
      rangeData: [],
      selectRange: null,
      startTime: new Date()
    }
  },
  computed: {
    city() {
      return this.$store.state.person.city
    },
    selectRangeTime() {
      if (this.selectRange) {
        return new Date(this.selectRange.scheduleTime).Format('yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
    dateScheduleParams() {
      const carts = this.$store.getters.cartList
      const pidArr = new Array()
      for (const cartItem of carts) {
        pidArr.push(cartItem.product.pid)
      }
      const pids = pidArr.join(',')
      return {
        pids: pids,
        shopId: this.$store.getters.shopId,
        startTime: this.startTime.getTime()
      }
    },
    totalPrice() {
      let total = 0
      const cartList = this.$store.getters.cartList
      for (const item of cartList) {
        total += item.total
      }
      return total
    }
  },
  watch: {
    selectDate(newVal, oldVal) {
      if (newVal) {
        indexApi.getRangeTime({ scheduleId: newVal.scheduleId }).then(data => {
          this.selectRange = null
          this.rangeData = data
        })
      }
    }
  },

  mounted() {
    this.getDateSchedule()
  },
  methods: {
    getDateSchedule() {
      indexApi.getDateSchedule(this.dateScheduleParams).then(data => {
        this.dateData = data
        this.selectDate = this.dateData[0]
      })
    },
    selectDateF(item) {
      this.selectDate = item
    },
    selectRangeF(item) {
      this.selectRange = item
    },
    goToOrder() {
      debugger
      const orderObj = {
        ...this.$store.state.person.selectShop,
        ...this.selectRange,
        orderTime: 1546503655,
        money: this.totalPrice,
        cart: this.$store.getters.cartList
      }
      this.$router.push({ path: '/userSubmitOrder', query: orderObj })
    }
  }
}
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
</style>
